<script setup>
import { ref } from 'vue'

const content = ref('')
const emit = defineEmits(['addTodo'])

// 按回车
const enterFn = () => {
  // 1. 非空判断
  if (content.value === '') return alert('请输入内容~')
  // 2. 发布(子传父)
  emit('addTodo', content.value)
  // 3. 清空输入框
  content.value = ''
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 
      v-model.trim       去除首尾空格
      @keyup.enter       按回车键
    -->
    <input
      v-model.trim="content"
      @keyup.enter="enterFn"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>
